let foods = document.querySelectorAll('.food');

let wenan = document.getElementById('WA');
let tip = document.getElementById('tip');
let foodBg = document.getElementById('bg-food');


foods[0].addEventListener("touchstart", function () {
    foodBg.src = './img/img/rou4.png'
    wenan.innerHTML = `
        <p>猪肉焯水，</p>
		<p>切成大小适宜的方块。</p>
    `
    tip.innerHTML = `
        <p>肥瘦适当、层层肥瘦相间，比例接近。</p>
		<p style="float: right;">——五花肉挑选经验</p>
    `
    this.style.boxShadow = '0 0 6px rgb(229, 255, 0)';
    foods[1].style.boxShadow = 'none';
    foods[2].style.boxShadow = 'none';
})

foods[1].addEventListener("touchstart", function () {
    foodBg.src = './img/img/congjiang3.png'
    wenan.innerHTML = `
     <p>用铁锅或者砂锅放入葱、</p>
	<p>姜、八角，肉皮朝下放入</p>
	<p>五花肉，倒入黄酒没过食</p>
	<p>材。</p>
    `
    tip.innerHTML = `
        <p>颗粒饱满、整齐完整、呈棕红色、夹边裂</p>
        <p>隙较大</p>
		<p style="float: right;">——八角挑选经验</p>
    `
    this.style.boxShadow = '0 0 6px rgb(229, 255, 0)';
    foods[0].style.boxShadow = 'none';
    foods[2].style.boxShadow = 'none';
})

foods[2].addEventListener("touchstart", function () {

    foodBg.src = './img/img/bingtang3.png';
    wenan.innerHTML = `
    <p>放入冰糖、老抽、盐大火</p>
    <p>煮开后，小火慢炖1.5小时</p> 
    <p>收汁出锅!</p>
    `

    tip.innerHTML = `
    <p>晶体光泽、晶粒均匀不含杂质，呈白色或</p>
    <p>淡黄色半透明</p>
    <p style="float: right;">——冰糖挑选经验</p>
    `
    this.style.boxShadow = '0 0 6px rgb(229, 255, 0)';
    foods[1].style.boxShadow = 'none';
    foods[0].style.boxShadow = 'none';
})